<template>
    <view>
        <view v-for="(item,index) in chapters" :key="index">
			<view class="cu-timeline" @click="toChapterDetail(item)">
				<view class="cu-time">{{checkOn(item)}}</view>
				<view class="cu-item text-green">
					<view class="content bg-green light shadow-blur">
						<view class="cu-capsule radius">
							<view class="cu-tag bg-green">{{getStartTime(item)}}</view>
							<view class="cu-tag line-green">{{getEndTime(item)}}</view>
						</view>
						<view class="margin-top">{{item.chapter_title}}</view>
					</view>
				</view>
			</view>
        </view>
    </view>
</template>

<script>
import {getTodayInfo, eraseSeconds, eraseYear} from '../index.js';

export default {
    props: {
        chapters: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    data() {
        return {

        };
    },
    methods: {
        toChapterDetail(e) {
            var toUrl = '/pages/chapter/chapter';
            uni.navigateTo({
                url: toUrl + '?course_id=' + e.course_id + '&course_chapter_id=' + e.course_chapter_id
            });
        },
        whetherIsOn(e) {
            var info = getTodayInfo(new Date());
            var date = info.date;
            var time = info.time;
            return e.course_date === date && e.start_time < time && time < e.end_time;
        },
        checkOn(e) {
            e.is_on = this.whetherIsOn(e);
            if(e.is_on) {
                this.$emit('haschapteron', {
                    course_id: e.course_id,
                    chapter_id: e.chapter_id,
                    chapter_title: e.chapter_title,
                    state: e.is_on
                });
            }
            return e.is_on ? '正在上课' : eraseYear(e.course_date);
        },
        getStartTime(e) {
            return eraseSeconds(e.start_time);
        },
        getEndTime(e) {
            return eraseSeconds(e.end_time);
        }
    }
};
</script>

<style lang="scss" scoped>
    /* #ifndef APP-NVUE */
    page {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-color: #efeff4;
        min-height: 100%;
        height: auto;
    }

    view {
        font-size: 14px;
        line-height: inherit;
    }
    /* #endif */

    .calendar-button {
        flex: 1;
        font-weight: bold;
        font-size: 32rpx;
    }

    .uni-card__header-extra-text {
        flex: 1;
        margin-left: $uni-spacing-col-base;
        color: $uni-text-color-grey;
        font-size: 26upx;
    }
</style>
